<template>
  <div class="website-container">

<!--
课程免费
在线学习
志同道合
智能规划
零基础是否适合学习编程
学员毕业平均薪资
自学还是培训
培训如何选择
学费价格
免费重修
校园环境
规章制度
-->
    <div class="box">

      <div ref="course"
           v-for="(obj,i) in list" :key="obj.id"
           :class="{'type-box':true}"
           @mouseover="hover(obj.name)"
           @mouseout="out()">
        <div>{{ obj.title }}</div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  //组件名称
  name: "Website",
  props: [],
  //组件注册
  components: {},
  //数据驱动
  data() {
    return {
      hoverId: "",
      list: [
        {id: "1",name:"课程免费",title: "课程免费", desc: ""},
        {id: "2",name:"在线学习",title: "在线学习", desc: ""},
        {id: "3",name:"志同道合",title: "志同道合", desc: ""},
        {id: "4",name:"智能规划",title: "智能规划", desc: ""},
      ]
    }
  },
  //计算属性
  computed: {},
  //数据监听
  watch: {},
  //方法
  methods: {
    hover(tab) {
      this.hoverId = tab;
    },
    out() {
      this.hoverId = "";
    }
  },
  //钩子函数
  mounted() {
  }
}
</script>

<style lang="less" scoped>
.website-container {
  margin: 10px 0px;

  .box {
    min-width: 1200px;
    width: 1200px;
    margin: auto auto;
    display: flex;
    flex-wrap: wrap;


    .type-box {
      min-width: 300px;
      width: 25%;
      height: 40px;
      border-radius: 4px;
      background-color: #bdeeda;
    }

    .now {
      width: 300px !important;
      height: 300px !important;
      margin: -15px -20px;
      box-shadow: 2px 2px 10px;
    }
  }
}
</style>